<template>
	<view class="page">
		<view class=" content flex-col align-center">

			<image src="../../static/images/logo.png" style="width: 144rpx;height: 144rpx; margin: 200rpx 0  0 0 ;"
				mode=""></image>
			<view class="title">
				靠谱京准
			</view>
			<view class="desc">
				出国查询 靠谱京准
			</view>
			<navigator url="/pages/codeLogin/login" hover-class="none" class="submit">手机号快捷登录</navigator>
			<button class="wechatLogin" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
				<image src="/static/images/wechat.png" mode=""></image>
				<text>微信登录</text>
			</button>
			<view class="mt12" style="width: 500rpx;margin: 24rpx auto 0;">
				<uv-checkbox-group v-model="checkboxValue">
					<uv-checkbox :name="1">
						<view class="ft12" style="color:rgba(0, 0, 0, .4) ;">
							已阅读并同意<text style="color:#63ACFF ;">《用户协议》</text>和<text style="color:#63ACFF;">《隐私政策》</text>
						</view>

					</uv-checkbox>
				</uv-checkbox-group>
			</view>
			<uv-popup ref="popup" mode="bottom" @change="change">

				<view class="popcontent plr20 ptb20">
					<view class="title"> 请设置您的基本信息 </view>
					<view class="justify-start align-center ">
						<text class="mr20">设置头像</text>
						<button class="avatar-box" open-type="chooseAvatar" @chooseavatar="chooseAvatar" type="default">
							<image v-if="form.avatar" :src="form.avatar" mode="aspectFit"></image>
							<image v-else src="/static/images/f.png" mode="aspectFit"></image>
						</button>
					</view>
					<view class="justify-start align-center mt15">
						<text class="mr20">设置昵称</text> <input id="nickname-input" v-model="form.nickname"
							type="nickname" class="weui-input" placeholder="请输入昵称" />
					</view>
					<view @click="login" class="submit  mt10">
						确定
					</view>
				</view>

			</uv-popup>

		</view>
	</view>
</template>

<script>
	import operate from '@/common/operate.js'
	export default {
		data() {
			return {
				form: {
					openid: "",
					nickname: "",
					avatar: "",
					phone: ""
				},
				checkboxValue: [1]

			}
		},
		onLoad() {
			// this.getSessionKey()  
		},
		mounted() {
			// this.$refs.popup.open()
		},
		methods: {
			async getSessionKey() {
				let vm = this
				uni.login({
					provider: 'weixin',
					"onlyAuthorize": true,
					success: async function(data) {
						await vm.$api.getOpenid({
							code: data.code
						}).then(res => {
							if (res.code == '200' && res.data) {
								vm.form.openid = res.data.openid
							}
						})

					},
					fail: function(err) {
						reject()
						console.log('登录授权失败', err.code)
					},
				});
			},
			login() {
				let vm = this
				uni.createSelectorQuery().in(this) // 注意这里要加上 in(this)  
					.select("#nickname-input")
					.fields({
						properties: ["value"],
					})
					.exec((res) => {
						const nickName = res?.[0]?.value
						console.log('昵称', nickName)
						vm.form.nickname = nickName
						if (!nickName) return uni.showToast({
							title: '请完善您的基本信息',
							icon: 'none'
						})
						vm.$api.register(vm.form).then(res => {
							console.log(res)
							if (res.code == 200) {

								uni.setStorageSync('userId', res.data.userId)
								vm.getUserInfo(res.data.userId)

							}
						})
					})

			},
			async getUserInfo(userid) {
				let vm = this
				const {
					data
				} = await this.$api.getMyInfo({
					user_id: userid
				})
				console.log(data)

				vm.$utils.msg('登录成功')
				uni.setStorageSync('userInfo', data)
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/tabbar/mine'
					})
				}, 800)


			},
			getPhoneNumber(event) {
				console.log(event)
				let vm = this
				this.$api.getPhone({
					code: event.detail.code
				}).then(res => {
					console.log(res)
					if (res.code == 200) {

						vm.form.phone = res.data.phone


						vm.$api.login({
							phone: res.data.phone
						}).then(res => {
							console.log(res)

							if (!res.userId) {

								vm.$refs.popup.open()
							} else {
								uni.setStorageSync('userId', res.userId)
								vm.getUserInfo(res.userId)
							}
						})


					}
				})
			},
			async chooseAvatar(e) {
				const {
					avatarUrl
				} = e.detail
				console.log(avatarUrl)
				const result = await this.$api.uploadImg({
					filePath: avatarUrl
				})
				console.log(result)
				this.form.avatar = operate.api + 'storage/' + result.filename
			},




		}
	}
</script>

<style lang="scss">
	.page {
		background-color: #ffffff !important;
		height: 100vh;
	}

	.content {
		padding-top: 150upx;
	}

	.avatar-box {
		width: 96rpx;
		height: 96rpx;
		background: transparent;
		border: none;
		border-radius: 50%;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}

		&::after {
			display: none;
		}
	}

	.title {
		color: rgba(0, 0, 0, 0.90);
		text-align: center;
		font-family: "PingFang SC";
		font-size: 40rpx;

		font-weight: 400;
		font-weight: 600;
		margin: 48rpx auto 24rpx;
	}

	.desc {
		color: var(--text-icon-font-gy-190, rgba(0, 0, 0, 0.90));
		font-family: "PingFang SC";
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		letter-spacing: 9.8px;
	}

	.submit {
		width: 690rpx;
		height: 100rpx;
		border-radius: 999px;
		background: #228CFC;
		margin-top: 112rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 100rpx;
	}

	.wechatLogin {
		position: fixed;
		bottom: 200rpx;
		color: var(--text-icon-font-gy-340, rgba(0, 0, 0, 0.40));
		text-align: center;
		font-family: "PingFang SC";
		font-size: 14px;
		font-style: normal;
		font-weight: 400;
		left: 0;
		right: 0;
		margin: auto;
		justify-content: center;
		align-items: center;
		line-height: normal;
		display: flex;
		flex-direction: column;

		image {
			width: 96rpx;
			height: 96rpx;
			margin-bottom: 24rpx;
		}
	}
</style>